<template>
  <div class="upgradeVIP-detail">
    <!-- 登陆状态-->
    <div class="login-state">
      <div class="loin-info">
        <div class="head">
          <img src="https://img.yzcdn.cn/vant/cat.jpeg">
        </div>
        <div class="info">
          <p>微信昵称</p>
          <p>暂未开通</p>
        </div>
      </div>
    </div>

    <!-- 购买-->
    <div class="buy-box">
      <div class="buy">
        <div class="item">
          <div class="price">
            <h3>永久</h3>
            <p>￥298</p>
          </div>
          <div class="price1">
           <p>原价458</p>
          </div>
        </div>
      </div>

      <div class="buy-detail">
        <p>优惠券<span>此套餐不支持使用优惠券</span></p>
        <p>积分抵扣<span>不支持积分抵扣</span></p>
      </div>
      <div class="pay"><p>立即购买</p></div>
    </div>

    <!-- 会员权益说明-->
    <div class="rule-box">
      <div class="rule">
        <h2>会员权益说明</h2>
        <p>1、课程9折优惠</p>
        <p>1、课程9折优惠</p>
        <p>1、课程9折优惠</p>
        <p>1、课程9折优惠</p>
      </div>
    </div>
  </div>
</template>

<script>
  import nError from './../tpl/error'
  import menuTpl from './../tpl/menuTpl'
  export default {
    data(){
      return{}
    },
    created(){

    },
    methods:{
    },
    components:{
    }

  }
</script>

<style scoped lang="scss">
  .upgradeVIP-detail{
    width: 100%;
    height: 100%;

    /* 登陆状态*/
    .login-state{
      width: 100%;
      height: auto;
      background: #0086b3;
      overflow: hidden;

      .loin-info{
        margin: 0 auto;
        margin-top: 1rem;
        padding: .5rem;
        width: 90%;
        display: flex;
        align-items: center;
        -webkit-align-items: center;
        background: #ffeac7;
        border-radius: .2rem;

        .head{
          width: 1.5rem;
          height: 1.5rem;

          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
    }

    /* 购买*/
    .buy-box{
      padding: .5rem 0;
      background: #fff;

      .buy{
        margin: 0 auto;
        width: 90%;
        display: flex;
        align-items: center;
        -webkit-align-items: center;

        .item{
          padding: .5rem 0;
          flex: .3;
          background: #ffeac7;
          border: #999999 solid 1px;
          border-radius: .2rem;
          text-align: center;

          .price{
            padding: .3rem 0;
            h3{font-size: .45rem}
            p{font-size: .5rem;color: #f0af1f}
          }
          .price1{
            padding: .3rem 0;
            p{font-size: .4rem;color: #f0af1f;text-decoration:line-through;}
          }
        }

      }

      .buy-detail{
        margin: 0 auto;
        padding: .3rem 0;
        width: 90%;

        p{
          padding: .3rem 0;
          span{
            float: right;
            color: #969896;
          }
        }
      }

      .pay{
        margin: 0 auto;
        width: 90%;

        p{
          text-align: center;
          padding: .5rem 0;
          background: #ffeac7;
          border-radius: .2rem;
          font-size: .48rem;
        }
      }
    }

    /* 会员权益说明*/
    .rule-box{
      background: #fff;

      .rule{
        margin: 0 auto;
        margin-top: .25rem;
        padding: .3rem 0;
        width: 90%;

        h2{padding:.3rem 0;font-size: .52rem;}
        p{padding:.2rem 0;color: #969896}
      }
    }
  }
</style>
